<template>
	<view class="page">
		<view class="padding-bottom-150" style="padding-bottom: 150rpx;">
			<flowbefore :beflows="beflows" :status="status" :isBtnClick="isBtnClicks" @save="save" @submit="submit" :statusType="statusType" :beforeData="beforeData" :formData='formData'>
				<!-- 蒙版 -->
				<!-- <view class="cpt-mask" v-if="F_Status == 1 || F_Status == 2"></view> -->
				<form class="flowform">
					<formControl v-for="(item,index) in filedList.fields" :key='index' :item='item' :formData='formData' :options='options' :formOperates='formOperates' :statusType="statusType" :F_Status='F_Status'/>
				</form>
			</flowbefore>
		</view>
	</view>
</template>

<script>
	import config from '@/common/js/config.js'
	import jnpf from '@/common/js/jnpf.js'
	import flowbefore from '@/components/work/flow-before.vue'
	import formControl from '@/components/formControl/formControl.vue'
	export default {
		components: {
			flowbefore,
			formControl
		},
		data() {
			return {
				beforeData:{},
				tableVmodel: [],
				options: [],
				props: {
					children: 'children', // 指定子树为节点对象的某个属性值
					label: 'fullName', // 指定节点标签为节点对象的某个属性值
					disabled: 'disabled', //	指定节点选择框是否禁用为节点对象的某个属性值
					value: 'id'
				},
				F_Status: null,
				statusType: null,
				title: null,
				isShow: false,
				status: '', //流程状态
				disabled: false, //启用
				beflows: {
					operstate: "",
					processId: ''
				},
				isBtnClicks: false,
				flowId: "",
				filedList: [], //主表list
				formData: {}, //主表model
				
				dynamicModel: {},
				Id: '',
				dynamicList:[],
				initId:'',
				requiredList:[],
				formOperates:[]
			};
		},

		/* 点击返回按钮清除缓存 */
		onBackPress(e) {
			this.$helper.removeStorage();
		},
		// #ifdef MP
		onUnload(e) {
			this.$helper.removeStorage();
		},
		// #endif


		onLoad(e) {
			
			/* 工作区进入状态 */
			let statusType = uni.getStorageSync("type")
			this.statusType = statusType
			// console.log(this.statusType)
			/* 工作区进入状态 End*/
			
			
			/* 根据状态禁用表单 */
			let F_Status = uni.getStorageSync("F_Status")
			this.F_Status = Number(F_Status)
			if (this.F_Status == 1 || this.F_Status == 2 || this.F_Status == 'submit') {
				this.disabled = true
			}
			
			/* 根据状态禁用表单 End*/


			/* 保存顶部标题 */
			let title = uni.getStorageSync("startedTitle");
			let title2 = uni.getStorageSync("F_FullName");
			let isF_Category = uni.getStorageSync("F_Category");
			if (isF_Category) {
				this.title = title2
			} else {
				if (title) {
					this.title = title
				} else {
					this.title = title2
				}
			}
			/* 设置顶部标题 */
			uni.setNavigationBarTitle({
				title: this.title
			});
			/* 保存顶部标题 End*/


			/* 获取,设置url参数 */
			let flowInfo = JSON.parse(e.flowInfo);
			this.beflows.operstate = flowInfo.operstate;
			this.beflows.processId = flowInfo.id;
			this.status = flowInfo.status;
			this.initId = flowInfo.initId;
			this.Id = flowInfo.id;
			this.flowId = flowInfo.flowId;
			
			if(flowInfo.operstate == 'add'){
				this.flowId = flowInfo.id;
				this.initId = flowInfo.id;
				this.beflows.processId = this.flowId;
				this.status = 0;
				uni.setStorageSync('F_Status',this.status)
				this.Id = '';
			}
			// /* 获取,设置url参数 End*/
			
			// /* 调用初始化渲染 */
			this.init(this.initId);
		},
		
		methods: {
			/* 页面初始化请求 */
			init(id) {
				let _this = this;
				uni.showLoading({
					title: '正在加载',
					mask: true
				});
				this.$helper.ajax({
					url: '/api/workflow/Engine/FlowEngine/' + id,
					success: res => {
						
						let initData = res.data.data.formData;
						let flowTemplateJson = JSON.parse(res.data.data.flowTemplateJson);
						//表单权限字段formOperates
						this.formOperates = flowTemplateJson.childNode.properties.formOperates;
						console.log('表单权限字段',this.formOperates)
						initData = JSON.parse(initData)
						this.filedList = initData;
						if (res.statusCode != 200) {
							return
						}
						const fields = this.filedList.fields;
						console.log('控件列表', fields);
						this.initHandel(fields);
					}
				})
			},

			
			/* 页面初始化处理 */
			async initHandel(fields){
				for (let i = 0; i < fields.length; i++) {
					const vModel = fields[i].__vModel__;
					const defaultValue = fields[i].__config__.defaultValue;
					const jnpfKey = fields[i].__config__.jnpfKey;
					const dataType = fields[i].__config__.dataType;
					this.$set(this.formData, "" + vModel + "", defaultValue);
					
					if(fields[i].__config__.required == true){
						this.$set(this.requiredList,vModel,fields[i].__config__.label)
					}
					if (jnpfKey == 'radio' || jnpfKey == 'checkbox' || jnpfKey == 'select') {
						let _options = [];
						if (dataType == 'static') {
							if (fields[i].__slot__) {
								_options = fields[i].__slot__.options;
							} else if (fields[i].__config__.options) {
								_options = fields[i].__config__.options;
							}
						} else if (dataType == 'dictionary') {
							_options = jnpf.dictionaryData(fields[i].__config__.dictionaryType)
							// /* 级联和树形选择器 */
							// this.dictionaryTreeOptins = _options
							
						} else if (dataType == 'dynamic') {
							let propsUrl = fields[i].__config__.propsUrl;
							await this.dynamicSelect(propsUrl)
							_options =  this.dynamicList;
							
						}
						this.$set(this.options, "" + vModel + "", _options);
					} else if (jnpfKey == 'treeSelect') {
						let _options = [];
						if (dataType == 'static') {
							_options = fields[i].options;
						} else if (dataType == 'dictionary') {
							_options = jnpf.dictionaryData(fields[i].__config__.dictionaryType)
						} else if (dataType == 'dynamic') {
							// let propsUrl = fields[i].__config__.propsUrl;
							// await this.dynamicSelect(propsUrl)
							// _options =  this.dynamicList;
						}
						this.$set(this.options, "" + vModel + "", _options);
					} else if (jnpfKey == 'cascader') {
						let _options = [];
						if (dataType == 'static') {
							_options = fields[i].options;
						} else if (dataType == 'dictionary') {
							_options = jnpf.dictionaryData(fields[i].__config__.dictionaryType)
						} else if (dataType == 'dynamic') {
							// let propsUrl = fields[i].__config__.propsUrl;
							// await this.dynamicSelect(propsUrl)
							// _options =  this.dynamicList;
						}
						this.$set(this.options, "" + vModel + "", _options);
					}
					if (jnpfKey == 'table') {
						this.tableVmodel.push(vModel);
						let item = {}
						for (var j = 0; j < fields[i].__config__.children.length; j++) {
							let e = fields[i].__config__.children[j];
							item[e.__vModel__] = e.__config__.defaultValue;
							const _childVModel = e.__vModel__;
							if (e.__config__.jnpfKey == 'radio' || e.__config__.jnpfKey == 'checkbox' || e.__config__.jnpfKey ==
								'select') {
								let _options = [];
								if (e.__config__.dataType == 'static') {
									if (e.__slot__) {
										_options = e.__slot__.options;
									} else if (e.__config__.options) {
										_options = e.__config__.options;
									}
								} else if (e.__config__.dataType == 'dictionary') {
									_options = jnpf.dictionaryData(e.__config__.dictionaryType)
								} else if (e.__config__.dataType == 'dynamic') {
									let propsUrl = e.__config__.propsUrl;
									await this.dynamicSelect(propsUrl)
									_options =  this.dynamicList;
								}
								//子表下拉的list
								this.$set(this.options, _childVModel, _options)
							} else if (e.__config__.jnpfKey == 'treeSelect') {
								let _options2 = [];
								if (e.__config__.dataType == 'static') {
									_options2 = e.options;
								} else if (e.__config__.dataType == 'dictionary') {
									_options2 = jnpf.dictionaryData(e.__config__.dictionaryType)
								} else if (e.__config__.dataType == 'dynamic') {
									// let propsUrl = fields[i].__config__.propsUrl;
									// await this.dynamicSelect(propsUrl)
									// _options =  this.dynamicList;
								}
								this.$set(this.options, "" + _childVModel + "", _options2);
							} else if (e.__config__.jnpfKey == 'cascader') {
								let _options3 = [];
								if (e.__config__.dataType == 'static') {
									_options3 = e.options;
								} else if (e.__config__.dataType == 'dictionary') {
									_options3 = jnpf.dictionaryData(e.__config__.dictionaryType)
								} else if (e.__config__.dataType == 'dynamic') {
									// let propsUrl = fields[i].__config__.propsUrl;
									// await this.dynamicSelect(propsUrl)
									// _options =  this.dynamicList;
								}
								this.$set(this.options, "" + _childVModel + "", _options3);
							}
						}
						this.formData[vModel] = [item];
					}
				}
				if(this.beflows.operstate == 'info'){
					// console.log('ok')
					this.wirteBack()
				}else{
					// console.log('ok')
				}
			},
			
			/* 回写请求 */
			async wirteBack(){
				const res = await this.$helper.ajaxPromise({
					url: '/api/workflow/Engine/FlowTask/' + this.Id,
				})
				let _data= JSON.parse(res.data.data.data);
				// console.log(_data)
				this.formData = {...this.formData,..._data};
				// console.log("回写请求回来的数据",this.formData)
			},
			
			
			

			async dynamicSelect(id) {
				const res = await this.$helper.ajaxPromise({
					url: '/api/system/Base/DataInterface/' + id + '/Actions/Response',
				})
				let dynamicList = res.data.data;
				this.dynamicList = dynamicList;
				// console.log("远端数据", this.dynamicList)
			},

			/* 保存 */
			save(e) {
				let _data ={
					status:1,
					flowId:this.flowId,
					data:JSON.stringify(this.formData)
				}
				
				let method = "POST";
				let url = "/api/workflow/Engine/FlowTask";
				if(this.Id != ''){
					method = "PUT";
					url=url+"/"+this.Id;
					_data ={
						status:1,
						flowId:this.flowId,
						data:JSON.stringify(this.formData),
						id:this.Id,
					}
				}
				// console.log(this.formData)
				for(let key in this.requiredList){
					if(this.formData[key] == undefined){
						this.$helper.msg(this.requiredList[key]+'为必填')
						return;
					}
				}
				this.$helper.ajax({
					url: url,
					method:method,
					contentType: "application/json",
					data:_data,
					success: res => {
						this.$helper.msg(res.data.msg, 'success');
						if (this.beflows.operstate=='add') {	
							this.removeStorage()
							uni.redirectTo({
								url: '../../operate/started/started',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
							
						}else{
							this.removeStorage()
							uni.navigateBack();
						}
						this.isBtnClicks=false
					}
				})
			},
			
			
			submit(e) {
				let _data ={
					status:0,
					flowId:this.flowId,
					data:JSON.stringify(this.formData)
				}
				
				let method = "POST";
				let url = "/api/workflow/Engine/FlowTask";
				if(this.Id != ''){
					method = "PUT";
					url=url+"/"+this.Id;
					_data ={
						status:0,
						flowId:this.flowId,
						data:JSON.stringify(this.formData),
						id:this.Id,
					}
				}
				for(let key in this.requiredList){
					if(this.formData[key] == undefined){
						this.$helper.msg(this.requiredList[key]+'为必填')
						return;
					}
				}
				this.$helper.ajax({
					url: url,
					method:method,
					contentType: "application/json",
					data:_data,
					success: res => {
						this.$helper.msg(res.data.msg, 'success');
						if (this.beflows.operstate=='add') {	
							this.removeStorage()
							uni.redirectTo({
								url: '../../operate/started/started',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
							
						}else{
							this.removeStorage()
							uni.navigateBack();
						}
						this.isBtnClicks=false
					}
				})
			},

			
			/* 清除缓存 */
			removeStorage() {
				/* 删除缓存 */
				uni.removeStorageSync("item");
				uni.removeStorageSync("index");
				uni.removeStorageSync("rangData");
				uni.removeStorageSync("rangeIndex");
				uni.removeStorageSync("startedTitle");
				uni.removeStorageSync("F_FullName");
				uni.removeStorageSync("F_Category");
				uni.removeStorageSync("type");
				uni.removeStorageSync("F_Status");
				uni.removeStorageSync("obj");
				uni.removeStorageSync("_filedList");
			},
		}
	}
</script>

<style scoped lang="scss">
	 .cpt-mask {  
	        position: fixed;  
	        top: 0;  
	        left: 0;  
	        width: 100%;  
	        height: 100%;  
	        // background-color: #000000;  
	        // opacity: 0.1;  
	        z-index: 99;  
	    }  
	.uni-share {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		background-color: #fff;
	}

	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		// justify-content: center;
		padding: 15px;
		height: 500rpx;
		overflow-y: scroll;
	}


	.uni-share-content-image {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// justify-content: center;
		align-items: center;
		width: 100%;
		padding: 20rpx 0;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.uni-share-content-text {
		font-size: 26rpx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}

	.uni-share-btn {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 14px;
		border-top-color: #f5f5f5;
		border-top-width: 1px;
		border-top-style: solid;
		text-align: center;
		color: #666;
	}



















	.required {
		color: red;
	}


	// .formlistInfo{
	// 	display: flex;
	// 	flex-direction: row;
	// 	justify-content: space-between;
	// 	align-items: center;
	// }
	.inputBox {
		flex-grow: 2;
		padding: 20rpx 10rpx;
		position: relative;

		input {
			color: #9A9A9A;
			font-size: 30rpx;
		}
	}

	//单行输入
	// .singleinputBox{
	// 	display: flex;
	// 	flex-direction: row;
	// 	align-items: center;

	// }

	/* 文本框 */
	// .text-box{
	// 	display: flex;
	// 	flex-direction: column;
	// 	justify-content: flex-start;
	// 	// margin-bottom: 10px;
	// 	padding: 30rpx 20rpx;
	// 	text-align: center;
	// 	.textBoxLableTitle{
	// 		display: flex;
	// 		flex-direction: row;
	// 		justify-content: flex-start;
	// 		align-items: center;
	// 		// padding-bottom: 30rpx;
	// 	}
	// }

	/* 数字框 */
	.numberBox {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 20rpx 0;
	}

	/*密码框 */
	.uni-input-wrapper {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding: 18rpx 10rpx;
		flex-direction: row;
		flex-wrap: nowrap;
		background-color: #FFFFFF;

		align-items: center;

		input {
			width: 100%;
			padding-right: 10rpx;
		}

		.ym-custom-close-circle-outline {
			font-size: 26rpx;
			color: #9A9A9A;
		}

		.ym-custom-eye {
			color: #9A9A9A;
			margin-left: 10rpx;
		}

		.uni-eye-active {
			color: #007AFF;
		}
	}

	/* 评分 */
	.example-body {
		/* #ifndef APP-NVUE */
		// display: flex;
		/* #endif */
		// flex-direction: row;
		// flex-wrap: wrap;
		// justify-content: center;
		// padding: 0;
		// font-size: 14px;
		// background-color: #ffffff;
	}

	/* 开关 */
	// .switch{
	// 	width: 100%;
	// 	display: flex;
	// 	flex-direction: row;
	// 	justify-content: flex-start;
	// 	padding: 20rpx 0;
	// }
	/* 分割线 */
	.splitLine {
		padding: 50rpx 0;
		position: relative;

		.txtBox {
			position: absolute;
			top: 0;
			left: 50%;
			background-color: #FFFFFF;
			padding: 25rpx 25rpx;
			transform: translate(-50%, 0);
			z-index: 9;
		}
	}

	/* 图片上传 */
	// .cell-pd {
	// 	padding: 22rpx 30rpx;
	// }

	// /* 部门级联 */
	// .TreeSelect{
	// 	display: flex;
	// 	flex-direction: row;
	// 	justify-content: flex-start;
	// 	padding: 22rpx 0;
	// }
	// .treeBox{
	// 	width: 100%;
	// 	height: 100%;
	// 	position: absolute;
	// 	top: 0;
	// 	background-color: #FFFFFF;
	// 	overflow-y: scroll;
	// 	left: 0;
	// }
</style>
